import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import YwxModuleTitle from '../../common/YwxModuleTitle/YwxModuleTitle';
import './UserFunction.less';
import { Toast } from 'antd-mobile';

export default class UserFunction extends Component {

    constructor(props) {
        super(props);
        this.state = {
            functionList: [
                { id: 1, img: require('../../../images/myself_icon3.png'), url: '', title: '我的推广码' },
                { id: 2, img: require('../../../images/myself_icon4.png'), url: '/team', title: '我的团队' },
                { id: 3, img: require('../../../images/myself_icon5.png'), url: '/authentication', title: '实名认证' },
                { id: 4, img: require('../../../images/myself_icon6.png'), url: '/order', title: '提现明细' },
                { id: 5, img: require('../../../images/myself_icon7.png'), url: '/audit', title: '佣金审核' },
                { id: 6, img: require('../../../images/myself_icon12.png'), url: '/task/log', title: '报件记录' },
            ]
        };
    };

    onAuthenticationClick = () => {
        Toast.fail('您已经实名认证过了');
    };

    render() {
        return (
            <div className='user-function'>
                <YwxModuleTitle>个人功能</YwxModuleTitle>
                <div className='user-function-list'>
                    {
                        this.state.functionList.map(item => {
                            if (item.id === 1) {
                                return (
                                    <div onClick={() => { this.props.switchTab(2) }} className='user-function-item' key={item.id}>
                                        <div>
                                            <img className='function-icon' src={item.img} alt="" />
                                        </div>
                                        <div className='function-text'>{item.title}</div>
                                    </div>
                                )
                            } else if (item.id === 3 && this.props.isAuthentication) {
                                return (
                                    <div onClick={this.onAuthenticationClick} className='user-function-item' key={item.id} >
                                        <div>
                                            <img className='function-icon' src={item.img} alt="" />
                                        </div>
                                        <div className='function-text'>{item.title}</div>
                                    </div>)
                            } else {
                                return (
                                    <Link to={item.url} className='user-function-item' key={item.id} >
                                        <div>
                                            <img className='function-icon' src={item.img} alt="" />
                                        </div>
                                        <div className='function-text'>{item.title}</div>
                                    </Link>)
                            }
                        })
                    }
                </div>
            </div>
        );
    };
}